<template>
	<div class="search-wraper top-search">
		<div class="search-box">

			<div class="search-item">
				<span>定位地区</span>
				<el-cascader :props="{ checkStrictly: true }" :options="placeOptions" collapse-tags @change="areaChange"
					popper-class="disableFirstLevel" v-model="areaCode" style="width: 100%;" clearable size="small">
				</el-cascader>
			</div>

			<div class="search-item">
				<span>选择日期</span>
				<el-date-picker size="small" v-model="pageState.searchForm.searchDate" type="date" placeholder="选择日期时间"
					:picker-options="timePickerOptions">
				</el-date-picker>
			</div>

			<div class="search-item">
				<span>对比期</span>
				<el-date-picker size="small" v-model="pageState.searchForm.compareDate" type="date" placeholder="选择日期时间"
					:picker-options="compareOption">
				</el-date-picker>
			</div>

			<div class="search-item">
				<a-button type="primary" @click="queryData"> 查 询 </a-button>
			</div>
		</div>

	</div>
</template>

<script>
import moment from 'moment';
import cityData from "@/model/cityData";

export default {
	data() {
		return {
			placeOptions: [],
			timePickerOptions: {
				disabledDate(time) {
					return time.getTime() > moment().subtract(1, 'day').valueOf()
				},
			},
			compareOption: {
				disabledDate(time) {
					return time.getTime() > moment().subtract(2, 'day').valueOf()
				},
			},
			areaCode: [],
			rules: {
				"北京": "北京市",
				"天津": "天津市",
				"上海": "上海市",
				"重庆": "重庆市",
				"内蒙古自治区": "内蒙",
				"广西壮族自治区": "广西",
				"西藏自治区": "西藏",
				"宁夏回族自治区": "宁夏",
				"新疆维吾尔自治区": "新疆",
				"香港特别行政区": "香港",
				"澳门特别行政区": "澳门",
			}
		};
	},

	props: {
		pageState: {
			type: Object,
			default: () => ({})
		}
	},

	mounted() {
		this.setDefault()
		this.placeOptions = cityData.areajson;
		this.changeLabel(this.placeOptions)
	},

	methods: {
		// 修改一下直辖市, 自治区的规则
		changeLabel(arr = []) {
			arr.map(item => {
				item.value = this.rules[item.label] || item.label
				if (item.children && item.children.length) {
					this.changeLabel(item.children)
				}
			})
		},

		setDefault() {
			this.areaCode = [this.pageState.searchForm.provName, this.pageState.searchForm.cityName, this.pageState.searchForm.countyName]
			// if (this.pageState.searchForm.provName) {
			// 	this.areaCode.push(this.pageState.searchForm.provName)
			// }
			// if (this.pageState.searchForm.cityName) {
			// 	this.areaCode.push(this.pageState.searchForm.cityName)
			// }
			// if (this.pageState.searchForm.countyName) {
			// 	this.areaCode.push(this.pageState.searchForm.countyName)
			// }
		},

		areaChange() {
			this.pageState.searchForm.provName = this.areaCode[0]
			this.pageState.searchForm.cityName = this.areaCode[1]
			this.pageState.searchForm.countyName = this.areaCode[2]
		},

		queryData() {
			this.$emit('query')
		},

	},

};
</script>

<style lang="less" scoped>
.top-search {
	min-width: 700px;
	overflow-x: auto;
	overflow-y: hidden;
	background-color: #fff;
	padding: 20px;
	border-radius: 4px;
	margin-bottom: 16px;
	padding-bottom: 0;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

	.el-radio {
		margin-right: 10px;
	}

	.el-input-number--mini {
		height: 32px;
	}

	/deep/.el-input--mini .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

	/deep/.el-input-number.is-controls-right[class*="mini"] [class*="decrease"],
	/deep/.el-input-number.is-controls-right[class*="mini"] [class*="increase"] {
		line-height: 15px;
	}

	.el-cascader--small {
		width: 100%;
	}

	.search-group {
		width: calc(100% - 110px);
		display: flex;
		flex-wrap: wrap;
	}

	.search-box {
		padding-bottom: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;

		.item-title {
			font-weight: bold;
			text-align: right;
			min-width: 56px;
			margin-right: 8px;
		}

		.search-item {
			width: 22%;
			max-width: 300px;
			min-width: 350px;
			margin-right: 16px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;

			span {
				margin-right: 10px;
				min-width: 80px;
				text-align: right;
			}
		}
	}

	.query-btn {
		position: absolute;
		right: 20px;
		z-index: 0;

		.ant-btn {
			min-width: 80px;
			margin-right: 20px;
		}
	}

	.el-select {
		width: 100%;
		max-width: 280px;
	}
}
</style>

<style lang="less">
.disableFirstLevel {
	.el-cascader-panel>div:first-of-type {

		.el-radio {
			display: none;
		}
	}
}
</style>
